import React, { Component } from 'react';
import {
    View, StyleSheet, Text,
} from 'react-native';
import CInput from 'react-native-controlled-input';


import NccButton from './Button';
import { ROUTERMAP, Global } from '../util/constants';

import { scaleSize, scaleFontSize } from '../util/size';
import NccSlider from './NccSlider';

interface IProps {
    type: string,
    targetCoinTypeText: string, // 目标的coinType
    payCoinTypeText: string, // 支付的coinType
    availableTitle: string,
    available: number | string,
    pricePlaceholder: string,
    amountPlaceholder: string, // eg. 买入量
    onChangeSlider?: Function,
    sliderValue: number,
    isLogin: boolean,
    nav: any,
    onPriceChange: (value: string) => void,
    onAmountChange: (value: string) => void,
    priceValue: string,
    amountValue: string,
    priceAmountTo: number | string,
    priceTotal: number | string,
    handleBuy?: Function,
    handleSell?: Function
}

interface IState {
    buySliderValue: number,
    sellSliderValue: number,
}


class TransactionLeftArea extends Component<IProps, IState> {
    constructor(props) {
        super(props);
    }

    onChangeSlider = (type: string, value: number) => {
        if (this.props.onChangeSlider) {
            this.props.onChangeSlider(type, value);
        }
    }

    turnToPage = (pageName: string, params?: Object | null) => {
        this.props.nav.navigate(pageName, params);
    };

    componentWillReceiveProps(props, nextProps){
        return true;
    }


    shouldComponentUpdate (props, nexProps) {
        return true;
    }

    /**
     * 用户买入的按钮，判断是否登陆
     */
    renderBtn = (type: string) => {
        let btnStyle = type === 'buy' ? 'btnBuy' : 'btnSell';
        if (this.props.isLogin) {
            if (type === 'buy') {
                return (
                    <NccButton text={'买入'} buttonStyle={styles.btnBuy} onPress={() => {
                        this.props.handleBuy && this.props.handleBuy();
                    }} />
                )
            } 
            return (
                <NccButton text={'卖出'} buttonStyle={styles.btnSell} onPress={() => {
                    this.props.handleSell && this.props.handleSell();
                }} />
            )
        }
        return (
            <NccButton text={'登录'} buttonStyle={styles[btnStyle]} onPress={() => {
                this.turnToPage(ROUTERMAP.login);
            }} />
        )
    };

    render() {
        const { type } = this.props;
        let sliderStyle = {};
        let priceTotalStyle = Global.buyColor;

        const sellColor = Global.sellColor;
        if (type === 'sell') {
            sliderStyle = {
                thumbBackGroundColor: sellColor,
                backThumbLeftColor: sellColor,
                minimumTrackTintColor: sellColor,
                // backThumbLeftColor: sellColor,
                // backThumbRightColor
            }
            priceTotalStyle = sellColor;
        }

        return (
            <View>
                <View style={styles.availablelArea}>
                    <Text style={styles.availableTitle}>可用 {this.props.availableTitle}</Text>
                    <Text style={styles.availableAmount}> {this.props.available} </Text>
                </View>

                
                <View style={{
                    display: 'flex',
                    flexDirection: 'row',
                    marginTop: scaleSize(17)
                }}>
                    <View style={{ borderLeftWidth: 0.5, borderTopWidth: 0.5, borderBottomWidth: 0.5, borderColor: '#C5C5C5' }}>
                        <Text style={{
                            width: scaleSize(60), lineHeight: scaleSize(40),
                            height: scaleSize(40), color: Global.grayTextColor, textAlign: 'center'
                        }}>
                            {this.props.pricePlaceholder}
                        </Text>
                    </View>
                    
                    <View style={{
                        borderTopWidth: 0.5, borderBottomWidth: 0.5, borderRightWidth: 0.5,  borderColor: '#C5C5C5'
                    }}>

                        <CInput
                            style={[styles.priceInput]}
                            // value={String(_price)}
                            value={this.props.priceValue}
                            keyboardType={'numeric'}
                            onChangeText={this.props.onPriceChange}
                            underlineColorAndroid={'transparent'}
                        />
                    </View>
                </View>


                <Text style={styles.amountToText}>≈ {this.props.priceAmountTo} CNY</Text>

                <View style={{
                    display: 'flex',
                    flexDirection: 'row',
                    marginTop: scaleSize(17)
                }}>
                    <View style={{ borderLeftWidth: 0.5, borderTopWidth: 0.5, borderBottomWidth: 0.5, borderColor: '#C5C5C5' }}>
                        <Text style={{
                            width: scaleSize(60), lineHeight: scaleSize(40),
                            height: scaleSize(40), color: Global.grayTextColor, textAlign: 'center'
                            
                        }}>
                            {this.props.amountPlaceholder}
                        </Text>
                    </View>
                    <View style={{ borderTopWidth: 0.5, borderBottomWidth: 0.5, borderColor: '#C5C5C5' }}>
                        <CInput
                            style={{ height: scaleSize(40),  width: scaleSize(60), textAlign: 'right' }}
                            keyboardType={'numeric'}
                            // onChangeText={(text) => {
                            //     this.setState({ [amountLabel]: this.checkNum(text).toString() });
                            // }}
                            underlineColorAndroid={'transparent'}
                            onChangeText={this.props.onAmountChange}
                            value={this.props.amountValue}
                        />
                    </View>
                    <View style={{ borderRightWidth: 0.5, borderTopWidth: 0.5, borderBottomWidth: 0.5, borderColor: '#C5C5C5' }}>
                        <Text style={{
                            width: scaleSize(40), lineHeight: scaleSize(40), height: scaleSize(40),
                            fontSize: scaleFontSize(11),
                            textAlign: 'center', color: Global.grayTextColor
                        }}>
                            {this.props.payCoinTypeText}</Text>
                    </View>
                </View>

                <View style={{ marginTop: scaleSize(-3) }}>
                    <NccSlider
                        step={1}
                        value={this.props.sliderValue}
                        type={this.props.type}
                        onChangeSlider={this.onChangeSlider}
                        {...sliderStyle}
                    />
                </View>

                <View style={{ display: 'flex', flexDirection: 'row', marginTop: scaleSize(18), justifyContent: 'space-between' }}>
                    <Text style={{
                        fontFamily: 'PingFangSC-Medium',
                        fontSize: scaleFontSize(14),
                        color: '#888888',
                        lineHeight: scaleSize(20)
                    }}
                    >交易额: </Text>
                    <Text style={{
                        fontFamily: 'Helvetica',
                        fontSize: scaleFontSize(10),
                        color: priceTotalStyle,
                        // paddingLeft: scaleSize(13),
                        paddingRight: scaleSize(2),
                        width: scaleSize(74),
                        maxWidth: scaleSize(74),
                        lineHeight: scaleSize(20),
                        textAlign: 'right',
                    }}>
                        {Number(this.props.priceTotal).toFixed(4)}
                    </Text>
                    <Text style={{
                        fontFamily: 'PingFangSC-Regular',
                        fontSize: scaleFontSize(11),
                        color: '#9B9B9B',
                        lineHeight: scaleSize(20)
                    }}>
                        {this.props.targetCoinTypeText}
                    </Text>
                </View>
                <View style={{ marginTop: scaleSize(19) }} >
                    {
                        this.renderBtn(this.props.type)
                    }
                </View>
            </View>
        )
    }
}

export default TransactionLeftArea;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#FFFFFF'
    },
    scrollerContainer: {
        // padding: scaleSize(20)
    },
    topBar: {
        height: 50
    },
    mainContent: {
        display: 'flex',
        flexDirection: 'row'
    },
    availablelArea: {
        marginTop: scaleSize(18.5)
    },
    availableTitle: {
        fontFamily: 'PingFangSC-Regular',
        height: scaleSize(17),
        fontSize: scaleFontSize(12),
        color: '#888888',
        lineHeight: scaleSize(17)
    },
    availableAmount: {
        marginTop: scaleSize(6),
        height: scaleSize(19),
        fontSize: scaleFontSize(16),
        fontFamily: 'Helvetica',
        color: '#4A4A4A'
    },
    availabelAreaExtratBtn: {
        marginTop: scaleSize(11),
        height: scaleSize(32),
        backgroundColor: Global.sellColor,
        borderRadius: 1
    },
    availabelAreaExtratText: {
        fontFamily: 'PingFangSC-Semibold',
        fontSize: scaleFontSize(16),
        color: '#FFFFFF'
    },
    btnGroup: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-around'
    },
    opBtnBuy: {
        flex: 1,
        borderColor: Global.buyColor,
        borderBottomWidth: 1,
        // color: Global.buyColor,

        backgroundColor: '#F8F8F8'
    },
    opBtnBuyText: {
        color: Global.buyColor
    },
    opBtnSell: {
        flex: 1,
        borderBottomWidth: 1,
        borderColor: Global.sellColor,
        // color: Global.sellColor,
        backgroundColor: '#FFF'
    },
    opBtnSellText: {
        color: Global.sellColor
    },
    op1: {
        marginTop: scaleSize(24),
        display: 'flex',
        flexDirection: 'row'
    },
    priceInput: {
        height: scaleSize(40),
        width: scaleSize(100),
    },
    amountToText: {
        marginTop: scaleSize(7),
        fontFamily: 'Helvetica',
        fontSize: scaleFontSize(10),
        color: '#9B9B9B'
    },
    btnSubtract: {
        width: 40,
        backgroundColor: '#8d8d8d',

    },
    btnPlus: {
        width: 40,
        backgroundColor: '#8d8d8d',
    },
    btnBuy: {
        backgroundColor: Global.buyColor,
    },
    btnSell: {
        backgroundColor: Global.sellColor
    },
    left: {
        width: scaleSize(160),
    },
    right: {
        width: scaleSize(137),
        marginLeft: scaleSize(41),
        // borderColor: Global.sellColor,
        // borderWidth: 2
    },
    /////
    ///// topOrderArea
    ////
    topOrderTitleIndex: {
        fontFamily: 'PingFangSC-Regular',
        fontSize: scaleFontSize(10),
        color: '#9B9B9B',
        width: scaleSize(20),
        lineHeight: scaleSize(14),
        marginBottom: scaleSize(11),
        // textAlign: ''
    },
    topOrderTitlePrice: {
        width: scaleSize(66),
        fontFamily: 'PingFangSC-Regular',
        fontSize: scaleFontSize(10),
        color: '#9B9B9B',
        textAlign: 'right',
        lineHeight: scaleSize(14),
        marginBottom: scaleSize(11),
    },
    topOrderTitleAmount: {
        width: scaleSize(50),
        fontFamily: 'PingFangSC-Regular',
        fontSize: scaleFontSize(10),
        color: '#9B9B9B',
        textAlign: 'right',
        lineHeight: scaleSize(14),
        marginBottom: scaleSize(11),
    },

    // topOrderTable
    topOrderTableLine: {
        display: 'flex',
        flexDirection: 'row',
        height: scaleSize(24),
    },
    topOrderTableIndex: {
        width: scaleSize(20),
        paddingLeft: 2,
        fontFamily: 'Helvetica',
        fontSize: scaleSize(12),
        color: '#9B9B9B',
        lineHeight: scaleSize(12)
    },
    topOrderTableBuy: {
        width: scaleSize(66),
        color: Global.buyColor,
        textAlign: 'right',
        fontFamily: 'Helvetica',
        fontSize: scaleSize(12),
        lineHeight: scaleSize(12)
    },
    topOrderTableSell: {
        width: scaleSize(66),
        color: Global.sellColor,
        textAlign: 'right',
        fontFamily: 'Helvetica',
        fontSize: scaleSize(12),
        lineHeight: scaleSize(12)
    },
    topOrderTableAmount: {
        width: scaleSize(50),
        textAlign: 'right',
        paddingLeft: 2,
        fontFamily: 'Helvetica',
        fontSize: scaleSize(12),
        color: '#9B9B9B',
        lineHeight: scaleSize(12)
    },
    /// top active tab
    activeTopTab: {

    },
    inactiveTopTab: {
        borderWidth: 1,
        backgroundColor: '#ECECEC',
    },
    inactiveTopTabText: {
        fontFamily: 'PingFangSC-Regular',
        fontSize: scaleFontSize(14),
        color: '#C5C5C5',
    },
    activeTopTabText: {
        fontFamily: 'PingFangSC-Medium',
        fontSize: scaleFontSize(14),
        color: '#ED4D60',
    }

});